<template>
  <div class="blog-page">
    <h1>博客</h1>
    <div class="intro">
      <p>欢迎来到我们的博客！在这里，我们分享关于人工智能的最新动态、技术趋势和应用案例。</p>
      <p class="highlight">该网站所有相关功能均由 AI 进行生成。包括 bug 等内容也由 AI 进行修复，因此该网站调整较为频繁。</p>
    </div>
    <div class="articles">
      <div v-for="article in articles" :key="article.id" class="article">
        <h2>{{ article.title }}</h2>
        <p>{{ article.content }}</p>
        <div class="author">作者: {{ article.author }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Article {
  id: number
  title: string
  content: string
  author: string
}

const articles = ref<Article[]>([
  {
    id: 1,
    title: 'AI 在教育中的应用',
    content: '人工智能正在改变教育行业，通过个性化学习和智能辅导，AI 提供了更高效的学习体验。',
    author: '李华'
  },
  {
    id: 2,
    title: '自动驾驶技术的未来',
    content: '随着 AI 技术的进步，自动驾驶汽车正在成为现实，未来将彻底改变我们的出行方式。',
    author: '王强'
  },
  {
    id: 3,
    title: 'AI 在金融领域的创新',
    content: 'AI 正在推动金融行业的创新，从智能投顾到风险管理，AI 提供了更智能的解决方案。',
    author: '张伟'
  }
])
</script>

<style scoped>
.blog-page {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  text-align: left;

  h1 {
    font-size: 2rem;
    margin-bottom: 20px;
    text-align: center;
  }

  .intro {
    margin-bottom: 30px;
    font-size: 1rem;
    color: #666;

    .highlight {
      font-weight: bold;
      color: var(--primary-color);
      margin-top: 10px;
    }
  }

  .articles {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .article {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f9f9f9;

    h2 {
      font-size: 1.5rem;
      margin-bottom: 10px;
    }

    p {
      font-size: 1rem;
      color: #666;
      margin-bottom: 10px;
    }

    .author {
      font-size: 0.9rem;
      color: #999;
      text-align: right;
    }
  }
}
</style> 